<template>
  <div class="y-h-full y-relative">
    <router-view class="y-absolute -y-inset-1 y-z-50 y-bg-white" @refresh="onRefresh">
    </router-view>
    <yyFormTablePagination ref="yyFormTablePaginationRef" :tableConfig="tableConfig" :formConfig="formConfig"></yyFormTablePagination>
  </div>
</template>

<script>
import {
  isShowOptions,
  stateOptions,
  keepAliveOptions,
} from "@/constant/defaultOptions.js";
import yyFormTablePagination from "@/components/yyFormTablePagination/index.vue";
import { createLoading, createMessage } from "@/utils";
export default {
  name: "system_menu",
  components: { yyFormTablePagination },
  data() {
    return {
      formData: {},
      tableConfig: {
        tableColumn: [
          { prop: "id", align: "left", label: "菜单ID", width: 118 },
          { prop: "pid", label: "父级菜单ID", width: 88 },
          { prop: "name", label: "名称", minWidth: 128 },
          { prop: "code", label: "菜单编码", tips: "组件中唯一" },
          {
            prop: "component",
            label: "组件路径",
            tips: "组件读取的路径（前面自动拼接@/views/,后面自动拼接/index.vue）",
          },
          {
            prop: "path",
            label: "访问路径",
            minWidth: 88,
            tips: "功能访问路径，前面自动加上/",
          },
          {
            prop: "permission",
            label: "权限码",
            tips: "按钮级别以及菜单的权限码",
          },
          {
            prop: "routerViewName",
            label: "路由指向",
            tips: "多级路由嵌套,默认指向二级layer路由,若要改成别的,需要指向其他路由的菜单编码值",
          },
          { prop: "icon", label: "图标", minWidth: 88, icon: true },
          {
            prop: "sort",
            label: "排序",
            tips: "排序越大，越靠后",
            minWidth: 65,
          },
          {
            prop: "isShow",
            label: "显示",
            tips: "是否会显示在顶部菜单,会加载路由,可以通过路径访问",
            tag: true,
            tagOptions: isShowOptions,
            minWidth: 88,
          },
          {
            prop: "keepAlive",
            label: "开启缓存",
            tips: "开启缓存之后,切换路由页面会保持数据存在,不会消失",
            tag: true,
            tagOptions: keepAliveOptions,
            minWidth: 88,
          },
          {
            prop: "state",
            label: "状态",
            tips: "是否会显示在顶部菜单，不会加载路由，也就是访问不了",
            tag: true,
            tagOptions: stateOptions,
            minWidth: 88,
          },
        ],
        tableManagerColumn: [
          {
            prop: "edit",
            label: "编辑",
            type: "primary",
            size: "small",
            onClick: (_, row) => {
              this.$router.push(`/system/menu/edit?id=${row.id}`);
            },
          },
          {
            prop: "del",
            label: "删除",
            type: "danger",
            size: "small",
            onClick: (_, row) => {
              this.$confirm(`确定删除${row.name}菜单吗？`, "提示")
                .then(async () => {
                  const loading = createLoading(`正在执行中,请稍等`);
                  try {
                    await this.$globalApi.menu.sysMenuDeleteByIdApi({
                      ids: row.id,
                    });
                    createMessage("删除成功", { type: "success" });
                    this.onRefresh();
                  } catch (err) {
                    console.log("删除报错了", err);
                  } finally {
                    loading.close();
                  }
                })
                .catch(() => {});
            },
          },
        ],
        tableApi: this.$globalApi.menu.sysMenuListApi,
        tableHasPagination: false,
        tableHasSelection: false,
        tableHasIndex: false,
        tableBingConfig: {
          "row-key": "id",
          "default-expand-all": true,
          "tree-props": { children: "childList", hasChildren: "hasChildren" },
          "row-class-name": ({ row, rowIndex }) => {
            if (row.childList && row.childList.length) {
              return '!y-bg-[#fafafa]';
            }
            return "";
          },
        },
      },
      formConfig: {
        formColumn: [
          { component: "yyInput", prop: "name", label: "名称" },
          { component: "yyInput", prop: "path", label: "访问路径" },
          { component: "yyInput", prop: "permission", label: "权限码" },
          {
            component: "yySelect",
            prop: "state",
            label: "状态",
            options: stateOptions,
          },
        ],
        formManagerColumn: [
          {
            prop: "edit",
            label: "新增",
            type: "primary",
            size: "small",
            onClick: () => {
              this.$router.push(`/system/menu/add`);
            },
          },
        ],
      },
    };
  },
  methods: {
    onRefresh() {
      this.$refs.yyFormTablePaginationRef.search();
    },
  },
};
</script>

<style lang="scss" scoped>

</style>